<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="static/index.css">
    <script type="text/javascript" src="static/qs.min.js"></script>
    <title>案例材料</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <style>
        html, body {
            margin: 0;
            padding: 0;
            background: #00499e;
            height: 100%;
        }

        #app {
            min-height: 100%;
            padding: 20px;
            border: 15px solid #00499e;
            border-radius: 25px;
            background: white;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            max-width: 650px;
            margin: auto;
        }

        .page-header {
            color: #333;
            margin-left: -10px;
            margin-bottom: 20px;
            font-size: 16px;
            text-align: center;
        }

        .form-select {
            width: 100%;
            height: 40px;
        }

        .form-input {
            width: 100%;
            height: 40px;
        }

        #app .form-date {
            width: 100%;
        }

        .form-card {
            width: 100%;
            border: 1px solid #efefef;
            display: inline-block;
            padding: 20px 15px;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            border-radius: 8px;
            -webkit-border-radius: 8px;
            vertical-align: top;
            line-height: 26px;
            margin-right: 15px;
            margin-bottom: 10px;
            position: relative;
        }

        .delete-button {
            position: absolute;
            right: -2px;
            top: -2px;
            font-size: 20px;
            color: #f9a7a7;
            cursor: pointer;
        }

        .form-card .el-icon-plus {
            font-size: 30px;
            color: #1379ff;
            margin: 20px 0;
        }

        .form-name {
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .form-name-text {
            color: #333;
            font-size: 15px;
            font-weight: bold;
            flex: 1;
            padding-right: 5px;
            width: 0;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }

        .form-type {
            font-size: 13px;
            color: #999;
        }

        .el-dialog {
            max-width: 600px;
        }

        .el-message-box {
            width: 80%;
            max-width: 400px;
        }
        .download-text {
            color: #1279ff;
            word-break: break-all;
            cursor: pointer;
            font-size: 13px;
        }
    </style>
</head>

<body>
<div id="app">
    <div class="page-header" style="position:relative;">
        <i style="float: left;font-size: 20px;color:#1379ff;margin-left: 22px;cursor:pointer;" @click="back"
           class="el-icon-back"></i>
        <i class="el-icon-document" style="margin-right: 10px;color: #1279ff;"></i>案例材料
        <div v-if="disabled" style="position: absolute;right: 0;top: 0;color: #1279ff;font-size: 16px;cursor:pointer;">
            <span @click="edit">编辑</span>
        </div>
        <div v-else style="position: absolute;right: 0;top: 0;color: #1279ff;font-size: 16px;cursor:pointer;">
            <span @click="finish">完成</span>
        </div>
    </div>
    <el-row :gutter="20">
        <el-col :span="24">
            <div class="form-card" v-for="item of documents" @click="handleAddDocuments(item)"
                 :key="item.uid">
                <i v-if="!disabled" class="el-icon-circle-close delete-button"
                   @click.stop.prevent="deleteDocument(item)"></i>
                <div class="form-name">
                    <span class="form-name-text">{{item.clmc}}</span>
                    <span class="form-type">{{item.cllx}}</span>
                </div>
                <div style="word-break: break-all;">说明：{{item.clsm}}</div>
                <div v-if="item.docfile||item.pdffile" style="text-align: right">
                    <el-button type="primary" size="mini" v-if="item.docfile" icon="el-icon-download" @click.prevent.stop="download(item.docfile)">文档</el-button>
                    <el-button type="primary" size="mini" v-if="item.pdffile" icon="el-icon-download" @click.prevent.stop="download(item.pdffile)">PDF</el-button>
                </div>
            </div>
            <div style="font-size: 16px;color: #ccc;text-align: center;margin-top: 40px;"
                 v-if="disabled && documents.length === 0">未添加案例材料
            </div>
            <div class="form-card" @click="handleAddDocuments(false)" v-if="!disabled" style="cursor:pointer;text-align: center;">
                <i class="el-icon-plus"></i>
            </div>
        </el-col>
    </el-row>
    <el-dialog width="80%" title="编辑案例材料" append-to-body :visible.sync="dialog.visible">
        <el-form ref="form" label-width="80px" label-position="right" :model="dialog" :rules="rules">
            <el-form-item prop="cllx" :label="formMap['cllx']">
                <el-select :disabled="disabled" class="form-select" v-model="dialog.cllx" placeholder="请选择材料类型">
                    <el-option v-for="qx of types.cllxs" :key="qx.dmdm" :value="qx.dmdm" :label="qx.dmmc"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="clmc" :label="formMap['clmc']">
                <el-input :disabled="disabled" v-model="dialog.clmc" class="form-input" type="text"
                          placeholder="请输入材料名称" maxlength="20"></el-input>
            </el-form-item>
            <el-form-item prop="clsm" :label="formMap['clsm']">
                <el-input :disabled="disabled" v-model="dialog.clsm" class="form-input" type="text"
                          placeholder="请输入说明" maxlength="20"></el-input>
            </el-form-item>
            <el-form-item prop="docfile" :label="formMap['docfile']">
                <el-upload :action="baseUrl + 'PSAL/PSALDETAI'" name="xfile" :data="fileData"
                           style="width: 100px;display: inline-block"
                           :show-file-list="false" :on-success="docSuccess">
                    <el-button size="mini" type="primary" icon="el-icon-upload">上传</el-button>
                </el-upload>
                <div class="download-text" @click="download(dialog.docfile)"
                     v-if="dialog.docfile">{{dialog.docfile}}
                </div>
            </el-form-item>
            <el-form-item prop="pdffile" :label="formMap['pdffile']">
                <el-upload :action="baseUrl + 'PSAL/PSALDETAI'" name="xfile" :data="fileData"
                           style="width: 100px;display: inline-block"
                           :show-file-list="false" :on-success="pdfSuccess">
                    <el-button size="mini" type="primary" icon="el-icon-upload">上传</el-button>
                </el-upload>
                <div class="download-text" @click="download(dialog.pdffile)"
                     v-if="dialog.pdffile">{{dialog.pdffile}}
                </div>
            </el-form-item>
        </el-form>
        <div style="text-align:center;margin-top: 15px">
            <el-button type="primary" size="small" @click="addDocument">保存</el-button>
            <el-button type="info" size="small" @click="dialog.visible = false">取消</el-button>
        </div>
    </el-dialog>
</div>
</body>
<!-- import Vue before Element -->
<script src="static/vue.js"></script>
<!-- import JavaScript -->
<script src="static/index.js"></script>
<script src="static/axios.min.js"></script>
<script>
    var pageparm = getQueryString("pageparm"),
        formMap = {
            xmdm: '项目代码',
            alid: '案例id',
            almc: '案例名称',
            documents: '案例材料',
            cllx: '材料类型',
            clmc: '材料名称',
            docfile: 'doc文档',
            pdffile: 'pdf文档',
            clsm: '说明',
            qxdmmc: '案例区县名称',
            xxdmmc: '案例学校名称',
            xuid: '用户id',
            xuxm: '用户姓名',
            xtime: '更新时间'
        };
    new Vue({
        el: '#app',
        data: function () {
            var that = this, validate = [
                {
                    required: true,
                    validator(filed, val, callback) {
                        if (!val) {
                            callback(new Error(formMap[filed.fullField] + '不能为空'))
                        }
                        callback()
                    },
                    trigger: 'blur'
                }
            ]
            return {
                formMap,
                baseUrl,
                type: getQueryString("type"),
                fileData: {
                    act: 'afileid',
                    alid: getQueryString("alid")
                },
                types: {
                    cllxs: []
                },
                rules: {
                    cllx: validate,
                    clmc: validate,
                    clsm: validate
                },
                projectCodes: [],
                documents: [
                    // {
                    //     alid: '', // 案例id
                    //     cllx: '材料类型', // 材料类型
                    //     clmc: '材料名称', // 材料名称
                    //     docfile: 'doc文档', // doc文档
                    //     pdffile: 'pdf文档', // pdf文档
                    //     clsm: '323333' // 说明
                    // }
                ],
                dialog: {
                    visible: false,
                    type: '',
                    pzlid: '', // 案例id
                    cllx: '', // 材料类型
                    clmc: '', // 材料名称
                    docfile: '', // doc文档
                    pdffile: '', // pdf文档
                    clsm: '' // 说明
                }
            }
        },
        computed: {
            disabled() {
                return !this.type
            }
        },
        methods: {
            deleteDocument(item) {
                let that = this
                this.$confirm('是否删除此案例材料?').then(function (flag) {
                    if (flag) {
                        var params = {
                            act: 'DeleteCL',
                            pageparm: that.fileData.alid,
                            alid: that.fileData.alid,
                            pzlid: item.pzlid
                        }
                        axios.post(baseUrl + 'PSAL/PSALDETAI', Qs.stringify(params)).then(function (res) {
                            if (res.status === 200) {
                                that.getData()
                            }
                        })
                    }
                })
            },
            finish() {
                if (this.type === 'add') {
                    location.href = './'+getQueryString('redir')+'.html'
                } else {
                    this.type = ''
                }
            },
            edit() {
                this.type = 'modify'
            },
            download(id) {
                location.href = baseUrl + 'xfile/GetFileByID/' + id
            },
            docSuccess(res, file) {
                this.dialog.docfile = res.filesid
                this.$message.success('上传成功！')
            },
            pdfSuccess(res, file) {
                this.dialog.pdffile = res.filesid
                this.$message.success('上传成功！')
            },
            addDocument() {
                var that = this
                this.$refs.form.validate(function (flag) {
                    if (flag) {
                        var params = {
                            cllx: that.dialog.cllx,
                            clmc: that.dialog.clmc,
                            docfile: that.dialog.docfile,
                            pdffile: that.dialog.pdffile,
                            clsm: that.dialog.clsm,
                            act: that.dialog.type
                        }, type = that.dialog.type
                        if (type === 'ModifyCL') {
                            params.pzlid = that.dialog.pzlid
                            params.pageparm = that.fileData.alid
                            params.alid = that.fileData.alid
                        } else {
                            params.alid = that.fileData.alid
                        }
                        axios.get(baseUrl + 'PSAL/PSALDETAI', {params}).then(function (res) {
                            if (res.status === 200) {
                                if (res.data.succeed === '0') {
                                    that.$message.warning(res.data.xmsg)
                                    return
                                }
                                that.dialog.visible = false
                                if (type === 'ModifyCL') {
                                    that.documents.forEach(item => {
                                        if (item.pzlid === that.dialog.pzlid) {
                                            item.cllx = that.dialog.cllx // 材料类型
                                            item.clmc = that.dialog.clmc // 材料名称
                                            item.docfile = that.dialog.docfile // doc文档
                                            item.pdffile = that.dialog.pdffile // pdf文档
                                            item.clsm = that.dialog.clsm // 说明
                                        }
                                    })
                                } else {
                                    that.documents.push({
                                        cllx: that.dialog.cllx,
                                        clmc: that.dialog.clmc,
                                        docfile: that.dialog.docfile,
                                        pdffile: that.dialog.pdffile,
                                        clsm: that.dialog.clsm,
                                        pzlid: res.data.pzlid
                                    })
                                }
                                // history.back()
                            }
                        })
                    }
                })
            },
            handleAddDocuments(row) {
                if (this.disabled) return
                if (row) {
                    this.dialog.type = 'ModifyCL' // 案例id
                    this.dialog.cllx = row.cllx // 材料类型
                    this.dialog.clmc = row.clmc // 材料名称
                    this.dialog.docfile = row.docfile // doc文档
                    this.dialog.pdffile = row.pdffile // pdf文档
                    this.dialog.clsm = row.clsm // 说明
                    this.dialog.pzlid = row.pzlid // 说明
                } else {
                    this.dialog.type = 'AddCL'
                    this.dialog.pzlid = '' // 案例id
                    this.dialog.cllx = '' // 材料类型
                    this.dialog.clmc = '' // 材料名称
                    this.dialog.docfile = '' // doc文档
                    this.dialog.pdffile = '' // pdf文档
                    this.dialog.clsm = '' // 说明
                }
                this.dialog.visible = true
            },
            back() {
                history.back()
            },
            getTypes(type) {
                let that = this
                return axios.get(baseUrl + 'xctrl/getdmjson/' + type).then(function (res) {
                    if (res.status === 200) {
                        that.types[type.split('-')[1] + 's'] = res.data
                    }
                })
            },
            getData() {
                var params = {
                    act: 'RDataCL',
                    pageparm: this.fileData.alid
                }, that = this
                axios.get(baseUrl + 'PSAL/PSALDETAI', {
                    params: params
                }).then(function (res) {
                    if (res.status === 200) {
                        var docs = []
                        res.data.forEach(function (item) {
                            var re = {}
                            for (var key in item) {
                                if (item.hasOwnProperty(key)) {
                                    re[key.toLowerCase()] = item[key]
                                }
                            }
                            docs.push(re)
                        })
                        that.documents = docs
                    }
                })
            }
        },
        created() {
            this.getTypes('anli-cllx')
            this.getData()
        }
    })
</script>

</html>